<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:pou="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:component>
        
        <pou:layout style="height: 500px" widgetVar="lay" collapseTitle="cerrar"
                    expandTitle="abrir">
            
          <pou:layoutUnit id="center" position="center">
       
              <pou:gmap id="mapui" center="#{misRedesController.centerMap}" zoom="15" type="ROADMAP" model="#{misRedesController.mapModelRed}" style="min-width:600px;min-height:490px">  
                  <pou:ajax event="overlaySelect" listener="#{misRedesController.onMarkerSelect}" />  
                <pou:gmapInfoWindow>  
                        <pou:outputPanel style="text-align:center;display:block;margin:auto:">  

                            <pou:gmapInfoWindow maxWidth="400">  
                                <pou:outputPanel style="text-align:center;display:block;margin:auto:">  

                                    <h:outputText value="#{misRedesController.marker.title}"
                                                  style="font-weight: bold"/>
                                    <br />
                                    <h:outputText value="#{misRedesController.marker.data.descripcionPoi}"/>
                                    <br />
                                    <h:commandLink value="#{misRedesController.marker.data.urlWebPoi}"/>
                                    
                                </pou:outputPanel>  
                                <pou:galleria value="#{misRedesController.marker.data.imagenList}" var="images">  
                                        <pou:graphicImage value="#{images.urlImagen}" />  
                                </pou:galleria>

                            </pou:gmapInfoWindow>  

                        </pou:outputPanel>  

                    </pou:gmapInfoWindow> 
              </pou:gmap>  
         
           </pou:layoutUnit>
            <pou:layoutUnit id="left" position="west" size="275" collapsible="true" header="Opciones" > 
                    
                    <h:panelGrid columns="2" cellpadding="8px" id="availableReds"  style="margin-left:13px" >                        
                        <h:outputText value="Redes:" style="min-width: 9px"/>  
                        <pou:selectOneMenu value="#{misRedesController.selectedRed}" 
                            effect="fade" style="width:160px">  
                            <f:selectItem itemLabel="Selecciona una red" itemValue="" />  
                            <f:selectItems value="#{misRedesController.itemsRedes}"/>     
                            <pou:column>   
                                <pou:graphicImage value="/resources/img/users.png"/>  
                            </pou:column>  
                            <pou:ajax update="availablersUsers" listener="#{misRedesController.clearIdUsers}"/>
                        </pou:selectOneMenu>
                    </h:panelGrid>
                    <h:panelGrid columns="2" id="availablersUsers"  style="margin-left:10px" >
                        <h:outputText value="Miembros:"  />  
                        <pou:selectOneMenu  value="#{misRedesController.selectedUser}" 
                                            effect="fade" style="width:160px">  
                            <f:selectItem itemLabel="Selecciona Usuario" itemValue="" />  
                            <f:selectItems value="#{misRedesController.itemsMiembros}"/>  
                            <pou:ajax event="change" listener="#{misRedesController.update}"/>
                        </pou:selectOneMenu>
                        
                    </h:panelGrid>
                    <h:panelGrid columns="2" cellpadding="10px" style="margin-bottom:5px"> 
   
                            <pou:selectBooleanCheckbox value="#{misRedesController.todosLosPOIs}"/> 
                            <h:outputText value="Todos los POIs de Red  " /> 
                           
                            <pou:selectBooleanCheckbox value="#{misRedesController.misPOIs}"/>
                            <h:outputText value="POIs del Usuario" /> 
                                                    
                    </h:panelGrid>
                    <h:panelGrid columns="2">
                        <pou:commandButton value="Actualizar" id="ajaxdax" update="growl,mapui" />
                        <pou:ajaxStatus id="loading">
                                <f:facet name="start">
                                    <h:graphicImage value="resources/img/loading_circle.gif" />  
                                </f:facet>
                                <f:facet name="complete">  
                                    <h:outputText value="" />  
                                </f:facet>  
                        </pou:ajaxStatus>
                    </h:panelGrid>
            </pou:layoutUnit>  
           </pou:layout>
           <pou:growl id="growl" showDetail="true" sticky="true" />  
    </ui:component>
</html>
